<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/product">product</router-link> |
      <router-link to="/me">me</router-link> |
      <router-link to="/login">Login</router-link>
    </div> -->
	
	<div class="g-bottom-tabs" v-show="$bus.isTabsShow">
	  <div  class=" g-container">
			<mu-tabs  @change="switchTabs" center color="teal" full-width>
				<mu-tab>
				<mu-icon value="home"></mu-icon>
				移动端
				</mu-tab>
				<mu-tab>
				<mu-icon value="local_atm"></mu-icon>
				性能
				</mu-tab>
				<mu-tab>
					<!-- assessment  or favorite-->
				<mu-icon value="favorite"></mu-icon>
				安全
				</mu-tab>
				<mu-tab>
				<mu-icon value="person_pin"></mu-icon>
				算法
				</mu-tab>
			</mu-tabs>
	  </div>
	</div>
    <router-view/>
	<div class=" g-container"  v-show="$bus.isTabsShow">
		<div class="footer-space"></div>
	</div>
  </div>
</template>
<script>
export default {
  data(){
	  return {
		   shift: 'movies',
		   activeIndex: 0,
		   openSimple:true
	  }
  },
  methods:{
	 switchTabs(index){
	  let tabMap = {
		   0: 'mobile',
		   1: 'performance',
		   2: 'safe',
		   3: 'algorithm'
	  }
	  this.$router.replace(tabMap[index]);
	 }
  }
}
</script>
<style lang="less">
  // 全局
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none
}
#app .container{
  padding:0;
}



/* 定制提示框 ========================*/
.tz-warn-dialog .mu-dialog-title{
  padding: 10px 20px 10px;
}
.tz-warn-dialog h3{
  font-size:16px;
  margin: 0 auto;
}

.tz-warn-dialog .mu-dialog-body{
  padding:10px 0px 5px;
}
.tz-warn-content{
  padding-left:15px;
  padding-right:15px;
  font-size:12px;

  text-align: justify;
}
.tz-warn-content .first{
  text-indent: 2em;
}
.tz-warn-tips{
  margin-top:20px;
  padding-top:5px;
  border-top: 1px solid #eee;
  text-align: center;
}
/* 定制提示框 ========================*/


.g-bottom-tabs{
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
}
.g-bottom-tabs .mu-tab-wrapper{
    padding-top:6px;
    padding-bottom:6px;
  }
.g-bottom-tabs .mu-tab .mu-icon{
    margin-bottom: 0;
  }
.footer-space{
  height: 60px;
}



.el-tag {
    background-color: rgba(64, 158, 255, .1);
    display: inline-block;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #409eff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
    white-space: nowrap;
}

.el-tag--success {
    background-color: rgba(103, 194, 58, .1);
    border-color: rgba(103, 194, 58, .2);
    color: #67c23a;
}

.el-tag--info {
    background-color: rgba(64, 158, 255, .1);
    border: 1px solid rgba(64, 158, 255, .2);
    color: #409eff;
}

.el-tag--warning {
    background-color: rgba(230, 162, 60, .1);
    border-color: rgba(230, 162, 60, .2);
    color: #e6a23c;
}

.el-tag--danger {
    background-color: hsla(0, 87%, 69%, .1);
    border-color: hsla(0, 87%, 69%, .2);
    color: #f56c6c;
}

/*产品部分*/
.spn {
    color: red;
}
.pro-center {
    display: flex;
    /* justify-content: space-around; */
}
.pro-center p {
    font-size: 15px;
    
}
.pro-center>li {
    text-align: center;
    margin-right: 15px;
}
.pro-center>li:last-child{
  margin-right: 0px;
}

.mu-snackbar-top{
  z-index: 20190000 !important;
}
/* 为register同意协议准备 */
div.read-box{
  /* padding-bottom: 0; */
  margin-bottom: 0;
}
.read-box .mu-form-item-help{
  bottom: 10px;
}

.g-list-line>li{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.g-list-line>li:last-child{
  border-bottom:none;
}

.el-tag-box .el-tag{
  margin-right: 2px;
}
.el-tag-box .el-tag:last-child{
  margin-right: 0;
}


.load-more {
    padding: 20px 40px;
    text-align: center;
  }
.empty-box-text{
  color:#999;
  font-size:16px;
  text-align: center;
  padding:60px;
}


/* iphone4 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
  .invitee-mu-list .has-avatar{
    padding: 0 5px !important;
  }
}
/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
  .invitee-mu-list .has-avatar{
    padding: 0 5px !important;
  }
}

@media (min-width: 576px){
  .g-container {
      max-width: 540px;
  }
}

@media (min-width: 768px){
  .g-container {
    max-width: 720px;
  }
}

@media (min-width: 992px){
  .g-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px){
  .g-container {
    max-width: 1140px;
  } 
}

.g-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.my-income .mu-expansion-panel-header{
    padding: 0 24px 0 5px;
  }

.my-income .mu-expansion-panel-content{
  padding: 8px 12px 24px;
}


.my-income .mu-expansion-panel-header {
	 padding: 0 15px 0 5px;
}
.my-income  .mu-icon-button{
	width:16px;
}
.mu-expansion-panel{
	padding: 5px 0;
}
</style>
